<template>
	<view class="container" :class="'theme-'+theme">
		<!-- <view v-if="!hasLogin || (lists.length == 0)" class="empty">
				<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
				<view v-if="hasLogin" class="empty-tips">
					空空如也
					<view class="navigator" @click="toIndex">随便逛逛</view>
					<navigator class="navigator" url="../index/index" open-type="switchTab">随便逛逛></navigator>
				</view>
				<view v-else class="empty-tips">
					空空如也
					<view class="navigator" @click="navToLogin">去登录></view>
				</view>
			</view>		 -->
	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" >
				<image src="../../static/newh5/fanhui.png"
				class="yticon"
				style="width: 13px;height: 20px;color:black"
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">系统消息</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view>
		<view v-if="!hasLogin || (lists.length == 0)">
			<empty></empty>
		</view>


			<scroll-view  class="product-list" scroll-y :scroll-top="listScrollTop" @scroll="scroll" @scrolltolower="scrollToBottom">
				<view  class="itemBox" v-for="(item,index) in lists" :key="index">
				<view class="itemTime" >
					<view class="timeBox" >
						<text>{{item.createTime}}</text>
					</view>
				</view>
				<view class="list-cell b-b" @click="toDetail(item)"
				hover-class="cell-hover" :hover-stay-time="50">
					<b class="cell-tit">{{turnName (item.bizChildType)}}</b>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class=" b-b">
					<view class="itemBottom">
						<text class="cell-tit">{{item.content}}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>

	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
	import {
		mapMutations,
		mapState,
	} from 'vuex';
	import empty from "@/components/empty";
	import { getMessageNotice,getOrderMessage,getSn } from '@/api/message/message'
	export default {
		components: {
			empty,
		},
		data() {
			return {
				lists:[],
				snId:'',
				//通知类型字典转换
				typeList:[],
				listScrollTop:0,
				loadingType: 'more', //加载更多状态
				params:{
					bizParentType:76,
					limit:10,
					page:1,
				}
			};
		},
		onShow(){

		},
		onLoad(option) {
			this.getOrderMessage('refresh')
		},
		computed:{
			...mapState(['hasLogin'])
		},
		methods: {
			returnIndex() {
				goback()
			},
			scroll(e) {
				// console.log('e',e);
				if (e.detail.scrollTop > 20) {
					// this.showToTop = true;
					this.listScrollTop = e.detail.scrollTop;
				} else {
					// this.showToTop = false;
				}
			},
			//下拉刷新改造
			scrollToBottom(){
				console.log('下拉刷新');
				this.getOrderMessage()
			},
			async toDetail(item){
				console.log('id',item.bizEntityId);
				const params={
					id:item.bizEntityId
				}
				// let res = await getSn(params)
				// let idd = res.data.sn
				// console.log('idd',idd);
        uni.reLaunch({
          url: "/pages/index/index",
        });
			},
			turnName(val){
				let name = '暂无'
				this.typeList.forEach(item=>{
					Object.keys(item).map((key)=>{
						// console.log(key,item[key]); //key=>属性名  obj[key]=>属性值
						if(key == val){
							name = item[key]
						}
					});
				})
				return name
			},
			navToLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			toIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			async	getOrderMessage(type = 'add', loading){
				// const params = {
				// 	bizParentType:52,
				// 	limit:10,
				// 	page:1
				// }
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.params.page = 1;
				}
				let dataContent = await getMessageNotice(this.params)
				// getMessageNotice(this.params).then(res => {
				// 	if (res.code === 0) {
				// 		if (res.data !== null) {
				// 			// this.lists = JSON.parse(JSON.stringify(res.data.noticeIPage.records)) ;
				// 			dataContent = JSON.parse(JSON.stringify(res.data.noticeIPage))
				// 			this.typeList = JSON.parse(JSON.stringify(res.data.noticeTypeList));
				// 		}
				// 	} else {
				// 		this.toast(res.message)
				// 	}

				// })
				console.log('dataContent',dataContent);
				let noticeList = dataContent.data.noticeIPage.records
				let total = dataContent.data.noticeIPage.total
				this.typeList = dataContent.data.noticeTypeList
				if (type === 'refresh') {
					this.lists = noticeList;
				} else {
					this.lists = this.lists.concat(noticeList);
				}
				this.params.page += 1;
				console.log('lists',this.lists);
				console.log('total',total);
				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType = this.lists.length <Number(total) ? 'more' : 'nomore';
				console.log('this.loadingType ',this.loadingType );
				if (type === 'refresh') {
					uni.stopPullDownRefresh();
					if (loading === 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			navTo(url) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，不能进行此操作',
						confirmText: '去登录',
						cancelText: '取消',
						success: (suc) => {
							if (suc.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},


		}
	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
	}
	.container{
		height: 100%;
		background: $my-bg-color-grey
	}
	.product-list {
		background: $my-bg-color-grey;
			position: relative;
			// height: 100%;
			height: 800px;
			display: flex;
			// padding-top: 16rpx;
			// padding-bottom: env(safe-area-inset-bottom);
			flex-direction: column;
			flex-shrink: 0;
			/* width: 210upx; */
			// height: 90%;
			// background-color: #fff;
	}
	/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	.itemBox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 95%;
		margin-top: 25rpx;
		margin-left: 20rpx;
		.itemTime{
			display: flex;
			justify-content: center;
			.timeBox{
				text-align: center;
				justify-content: center;
				align-items: center;
				height: 40rpx;
				// width: 200rpx;
				color: white;
				background-color: $my-text-color-disable;
				text{
					line-height: 40rpx;
				}
			}
		}


		.itemBottom{
			height: 150rpx;
			background: #fff;
		}
	}
	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;
		margin-top: 30rpx;
		&.log-out-btn {
			margin-top: 30upx;
			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(.84);
		}
	}
</style>
